<template>
  <div>
    <div class="mask-fixed" @click="close" v-show="timeIsShow">
      <div class="content anim-swiper-UpIn">
        <h2>选择时间</h2>
        <div class="container">
          <picker-tem :datas="years" class="year" :update="updateCom" ref="year"></picker-tem>
          <picker-tem :datas="months" class="month" :update="updateCom" ref="month"></picker-tem>          
          <div class="selected"></div>
        </div>
        <div class="confirm">
          <input type="button" value="确定" @click="getPickedValue">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import picker from '../picker/picker.vue'
  export default {
    name: 'Time',
    props: ['startYear', 'timeIsShow'],
    components: {
      'picker-tem': picker
    },
    data () {
      return {
        years: [],
        months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        isInit: true,
        updateCom: false,
        pickedValue: ''
      }
    },
    methods: {
      close: function (event) {
        let target = event.target
        if (target.classList.contains('mask-fixed')) {
          this.$emit('hideTime')
        }
      },
      touchDisabled: function (event) {
        event.preventDefault()
      },
      // 生成年份
      yearCreate: function () {
        let year = []
        let startYear = this.startYear * 1
        let nowYear = new Date().getFullYear()
        let length = nowYear - startYear
        for (let i = 0; i <= length; i++) {
          year.push(startYear + i + '年')
        }
        this.years = year
      },
      // 获取选中的值
      getPickedValue: function () {
        let pickedYear = this.$refs.year.getPcikedValue()
        let pickedMonth = this.$refs.month.getPcikedValue()
        this.pickedValue = pickedYear + pickedMonth
        this.$emit('timeConfirm', this.pickedValue)
      }
    },
    created () {
      this.yearCreate()
    },
    updated () {
      if (this.timeIsShow) {
        this.updateCom = true
        document.body.addEventListener('touchmove', this.touchDisabled)
      } else {
        document.body.removeEventListener('touchmove', this.touchDisabled)
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '../../assets/css/function.scss';
  .mask-fixed{
    .content{
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      background: #fff;
      h2{
        height: rem(100);
        line-height: rem(100);
        background: #f0eff5;
        font-size: rem(38);
        color: #333;
      }
      .container{
        position: relative;
        height: 200px;
        overflow: hidden;
        font-size: 0;
        .year{
          left: 0;
        }
        .month{
          right: 0;
        }
        .selected:before{
          content: '';
          position: absolute;
          top: 80px;
          left: 0;
          height: 1px;
          width: 100%;
          background: #e6e6e6;
          transform: scaleY(.5);
        }
        .selected:after{
          content: '';
          position: absolute;
          top: 120px;
          left: 0;
          height: 1px;
          width: 100%;
          background: #e6e6e6;
          transform: scaleY(.5);
        }
      }
      .confirm{
        input{
          display: block;
          width: 100%;
          height: rem(100);
          background: #f0eff5;
          font-size: rem(34);
          color: #333;
        }
      }
    }
  }
</style>
